<template>
	<view>
		<view class="bg">
		</view>
		<view class="bg1" v-show="isShow" @click="hideToast">
		</view>
		
		<view class="search">
			<view class="search_wrapper">
				<view class="image">
					<image src="../../../static/image/sousuotianchong@2x(3).png" mode=""></image>
				</view>
				<view class="input">
					<u-input v-model="keyword" 
					placeholder="请输入想要搜索的关键字"
					height="30"
					@input="change"/>
				</view>
			</view>
		</view>
		<view class="empty" v-if="packageList.length==0">
			<image src="../../../static/image/empty.png" mode=""></image>
		</view>
		<view class="middle">
			<u-checkbox-group @change="checkboxChange">
			<view class="item" v-for="(item,index) in packageList" :key="item.id">
				<view class="top">
					<view class="icon">
						<image src="../../../static/image/juxing2.png" mode=""></image>
					</view>
					<view class="express_sn">
						{{item.express_sn}}
					</view>
				</view>
				<view class="content">
					<view class="check">
						<u-checkbox
							v-model="list[index].checked"  
							:name="item.id"
							shape="circle"
							active-color="#f7cc46"
						></u-checkbox>
					</view>
					<view class="">
						<view class="content_wrapper">
								<text class="label">物品名称：</text>
								<text class="data">{{item.name}}</text>
							</view>
							<view class="content_wrapper">
								<text class="label">物品价值：</text>
								<text class="data red">￥{{item.price}}</text>
							</view>
							<view class="content_wrapper">
								<text class="label">商品类型：</text>
								<text class="data">{{item.goodstype}}</text>
							</view>
							<view class="content_wrapper">
								<text class="label">商品数量：</text>
								<text class="data">{{item.num}}</text>
							</view>
							<view class="content_wrapper">
								<text class="label">入库时间：</text>
								<text class="data">{{item.rk_time}}</text>
							</view>
						</view>
					</view>
			</view>
			</u-checkbox-group>
		</view>
		<view class="fixed" v-if="packageList.length!==0">
			<view class="selectAll" @click="changeSelect">
				<image src="../../../static/image/gou-5@2x.png" mode="" v-if="isSelectAll"></image>
				<view class="circle" v-else>
				</view>
			</view>
			<view class="num">
				全选,已选择{{package_select.length}}件
			</view>
			<view class="button" @click="toDispose">
				<button>申请打包&合箱</button>
			</view>
		</view>
		<view class="toast" v-show="isShow">
				<view class="image">
					<image src="../../../static/image/zhifuchenggong@2x(1).png" mode=""></image>
				</view>
				<view class="text1">
					您的{{package_select.length}}件包裹申请打包&合箱成功
				</view>
				<view class="text2">
					请您耐心的等待包裹的处理~
				</view>
				<view class="sure" @click="hideToast">
					<button>我知道了</button>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				packageList:[],
				type:"order_package",
				order_status:2,
				offset:0,
				limit:10,
				keyword:"",
				package_ids:"",
				package_select:[],
				list:[],
				isSelectAll:false,
				isShow:false
			}
		},
		async onReachBottom(){
			this.offset+=10;
			this.limit+=10;
			let res=await this.getPackageList(this.type,this.order_status,this.offset,this.limit,this.keyword)
			this.packageList.push(...res)
			let length=this.packageList.length;
			for(let i=0;i<length;i++){
				this.list.push({checked:false})
			}
		},
		async created() {
			this.packageList=await this.getPackageList(this.type,this.order_status,this.offset,this.limit,this.keyword)
			let length=this.packageList.length;
			for(let i=0;i<length;i++){
				this.list.push({checked:false})
			}
			console.log(this.packageList)
		},
		methods: {
			async change(){
				this.packageList=await this.getPackageList(this.type,this.order_status,this.offset,this.limit,this.keyword)
			},
			async getPackageList(type,order_status,offset,limit,keyword){
				let token=uni.getStorageSync("token")
				const {data}=await this.$http({
					url:"order/member_list",
					data:{
						"type":type,
						"order_status":order_status,
						"offset":offset,
						"limit":limit,
						"keyword":keyword
					},
					header:{
						"token":token
					}
				})
				console.log(data.data)
				return data.data.list
			},
			async toDispose(){
				let token=uni.getStorageSync("token")
				const {data}=await this.$http({
					url:"order/member/action/pack",
					header:{
						"token":token
					},
					data:{
						"package_ids":this.package_ids
					}
				})
				this.packageList=await this.getPackageList(this.type,this.order_status,this.offset,this.limit)
				this.isShow=true
				this.isSelectAll=false
				this.list=this.list.map(item=>{return {"checked":false}})
			},
			checkboxChange(arr){
				this.package_select=arr
				this.package_ids=this.package_select.join(",");
				if(this.package_select.length==this.packageList.length){
					this.isSelectAll=true
				}else{
					this.isSelectAll=false
				}
			},
			changeSelect(){
				this.isSelectAll=!this.isSelectAll
				if(this.isSelectAll){
					this.list=this.list.map(item=>{return {"checked":true}})
					this.package_select=this.packageList.map(item=>item.id)
				}else{
					this.list=this.list.map(item=>{return {"checked":false}})
					this.package_select=[]
				}
			},
			hideToast(){
				this.isShow=false
			}
		}
	}
</script>

<style scoped>
.bg{
	width: 100%;
	height: 100%;
	background-color: #F1F1F1;
	position: fixed;
	left: 0;
	top: 0;
	z-index: -1;
}
.empty{
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.search{
	width: 100%;
	height: 100rpx;
	background: #FFFFFF;
	display: flex;
	align-items: center;
	margin-top: 1rpx;
}
.search .image{
	margin-right: 15rpx;
}
.search .image image{
	width: 27rpx;
	height: 27rpx;
	vertical-align: center;
}
.search_wrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 70rpx;
	width: 90%;
	margin: auto;
	background: #FFFFFF;
	border: 1rpx solid #999999;
	border-radius: 30rpx;
}
.middle{
	padding: 0 30rpx;
	margin-bottom: 20rpx;
}
.icon image{
	height: 27rpx;
	width: 23rpx;
}
.item{
	background: #FFFFFF;
	box-shadow: 0 0 29rpx 0 rgba(150, 150, 150, 0.3);
	border-radius: 10rpx;
	margin-top: 20rpx;
}
.top{
	display: flex;
	align-items: center;
	position: relative;
	padding: 20rpx 0rpx 20rpx 90rpx;
	height: 80rpx;
	border-bottom: 1rpx solid #E5E5E5;;
}
.top .icon{
	margin-right: 20rpx;
	margin-top: 5rpx;
}
.top .express_sn{
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #333333;
}
.top .btn_abnormal button{
	width: 100rpx;
	height: 50rpx;
	background: #F7CC46;
	border-radius: 25rpx;
	font-size: 22rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FCFBFB;
	position: absolute;
	right: 5%;
	top: 20%;
}
.content{
	padding: 30rpx;
	padding-top:20rpx ;
	display: flex;
	align-items: center;
}
.content_wrapper{
	margin-top: 10rpx;
}
.label{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #666666;
}
.data{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #333333;
}
.red{
	font-weight: 500;
	color: #CA2929;
}
.fixed{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 750rpx;
	height: 98rpx;
	background: #FFFFFF;
	box-shadow: 0px 0px 21rpx 0px rgba(153, 153, 153, 0.2);
	display: flex;
	align-items: center;
}
.selectAll{
	margin-left: 30rpx;
}
.circle{
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	background: #FFFFFF;
	border: 2rpx solid #AAAAAA;
}
.fixed .selectAll image{
	height: 40rpx;
	width: 40rpx;
}
.fixed .num{
	margin-left: 10rpx;
	height: 28rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #666666;
	line-height: 30rpx;
}
.button button{
	width: 270rpx;
	height: 70rpx;
	background: #F7CC46;
	border-radius: 35rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FCFBFB;
	position: absolute;
	right: 5%;
	top: 17%;
}
.bg1{
	position: fixed;
	background: #000000;
	z-index: 9000;
	width: 100%;
	height: 100%;
	opacity: 0.5;
}
.toast{
	position: fixed;
	z-index: 9999;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 520rpx;
	height: 381rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	text-align: center;
}
.toast .image{
	margin:30rpx 0;
}
.toast .image image{
	height: 83rpx;
	width: 83rpx;
}
.toast .text1{
	margin: 0 auto;
	margin-bottom:10rpx ;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #333333;
}
.toast .text2{
	margin: 10rpx 0 20rpx 0;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999999;
}
.toast .sure button{
	width: 240rpx;
	height: 80rpx;
	background: #F7CC46;
	border-radius: 40rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FDFBFB;
}
</style>
